<template>
  <el-dialog
    :title="title"
    v-model="formData.show"
    :modal="modal"
    :width="width"
    :center="center"
    :fullscreen="fullScreen"
    :top="top"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :style="dialogStyle"
    custom-class="lc-dialog"
  >
    <DialogBody
      ref="dialogBodyRef"
      v-bind="props.formData.data"
      :btnGroupVisible="false"
      :status="props.formData.status"
    />
    <template #footer>
      <div>
        <template v-if="props.formData.status === 'preview'">
          <el-button @click="handleClose">关闭</el-button>
        </template>
        <template v-else>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import DialogBody from "./page/index.vue";
const dialogBodyRef = ref();
const emit = defineEmits(["submit", "close"]);
defineOptions({
  name: "Order-form",
});
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
});
const top = "15vh";
const modal = true;
const title = "编辑";
const width = "50%";
const center = true;
const fullScreen = false;
const dialogStyle = computed(() => ({
  top,
  bottom: top,
}));
const handleSubmit = async () => {
  const ret = await dialogBodyRef.value.submitForm();
  emit("submit", ret);
  props.formData.show = false;
};
const handleClose = () => {
  emit("close");
  props.formData.show = false;
};
</script>

<style lang="scss" scoped></style>
